import * as echarts from 'echarts';

// pie
export const options1 = {
  tooltip: {
    trigger: 'item',
    backgroundColor: '#fff',
    borderColor: 'transparent',
    extraCssText:
      'width: auto; height: auto!important; font-size: 1.2rem; color: #333;'
  },
  title: {
    text: '',
    textStyle: {
      fontSize: '1.4rem',
      color: 'rgb(51, 51, 51)'
    },
    subtext: '总资产',
    subtextStyle: {
      fontSize: '1.2rem',
      color: 'rgb(51, 51, 51)'
    },
    left: '22%',
    x: 'center',
    y: 'center',
    textAlign: 'center'
  },
  legend: {
    left: '45%',
    top: 'center',
    orient: 'vertical',
    icon: 'circle',
    itemWidth: 8,
    itemHeight: 8,
    itemGap: 20,
    textStyle: {
      rich: {
        a: {
          fontSize: '1.2rem',
          color: '#333'
        },
        b: {
          fontSize: '2rem',
          color: '#333'
        }
      }
    }
  },
  series: [
    {
      type: 'pie',
      center: ['23%', '50%'],
      radius: ['23%', '55%'],
      avoidLabelOverlap: false,
      color: ['#2393ed', '#26b7c8', '#ff7882', '#f88864'],
      label: {
        show: true,
        position: 'inside',
        color: '#fff',
        fontSize: 10
      },
      labelLine: {
        show: false
      }
    }
  ]
};

// bar
export const options2 = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    backgroundColor: '#fff',
    borderColor: 'transparent',
    extraCssText: 'width: auto; height: auto!important; font-size: 1.2rem;'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: '10%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    axisTick: {
      show: false
    },
    axisLabel: {
      interval: 'auto',
      color: '#999',
      fontSize: '1.2rem'
    }
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      color: '#999',
      fontSize: '1.2rem'
    }
  },
  series: [
    {
      type: 'bar',
      barWidth: 15,
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 1,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#1067ee'
            },
            {
              offset: 1,
              color: '#36c0ec'
            }
          ]
        }
      },
      borderRadius: 16
    }
  ]
};

// circle-pie
export const options3 = {
  backgroundColor: '#fff',
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    icon: 'circle',
    left: '45%',
    y: 'center',
    itemWidth: 8,
    itemHeight: 8,
    itemGap: 10,
    tooltip: {
      show: true
    },
    textStyle: {
      rich: {
        title: {
          color: 'rgb(51, 51, 51)'
        },
        title1: {
          color: 'rgb(51, 51, 51)',
          fontSize: '2.4rem'
        },
        value: {
          color: 'rgb(51, 51, 51)'
        },
        value1: {
          color: 'rgb(51, 51, 51)',
          fontSize: '2.4rem'
        }
      }
    }
  },
  color: ['#1067ee', '#119bd2', '#fe67ac', '#8363f9', '#f96363'],
  series: [
    {
      type: 'pie',
      clockwise: true,
      radius: ['85%', '95%'],
      center: ['20%', '52%'],
      label: {
        show: false
      },
      itemStyle: {
        borderRadius: '50%',
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#1067ee'
            },
            {
              offset: 1,
              color: '#36c0ec'
            }
          ]
        }
      }
    },
    {
      type: 'pie',
      clockwise: true,
      radius: ['70', '80%'],
      center: ['20%', '52%'],
      label: {
        show: false
      },
      itemStyle: {
        borderRadius: '50%',
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#119bd2'
            },
            {
              offset: 1,
              color: '#39cfbf'
            }
          ]
        }
      }
    },
    {
      type: 'pie',
      clockwise: true,
      radius: ['55%', '65%'],
      center: ['20%', '52%'],
      label: {
        show: false
      },
      itemStyle: {
        borderRadius: '50%',
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#fe67ac'
            },
            {
              offset: 1,
              color: '#ff875e'
            }
          ]
        }
      }
    },
    {
      type: 'pie',
      clockwise: true,
      radius: ['40%', '50%'],
      center: ['20%', '52%'],
      label: {
        show: false
      },
      itemStyle: {
        borderRadius: '50%',
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#8363f9'
            },
            {
              offset: 1,
              color: '#cc70ee'
            }
          ]
        }
      }
    },
    {
      type: 'pie',
      clockwise: true,
      radius: ['25%', '35%'],
      center: ['20%', '52%'],
      label: {
        show: false
      },
      itemStyle: {
        borderRadius: '50%',
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#f96363'
            },
            {
              offset: 1,
              color: '#f7b165'
            }
          ]
        }
      }
    }
  ]
};

// line
export const options4 = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line'
    },
    backgroundColor: '#fff',
    borderColor: 'transparent',
    extraCssText:
      'width: auto; height: auto!important; font-size: 1.2rem; color: #333;'
  },
  color: ['#108cee', '#7a6efb'],
  legend: [
    {
      data: [
        {
          name: '资金总额',
          icon: 'rect'
        }
      ],
      itemWidth: 30,
      itemHeight: 4,
      top: '3%',
      right: 150,
      textStyle: {
        color: '#999',
        fontSize: '1.2rem'
      }
    },
    {
      data: [
        {
          name: '活期总额',
          icon: 'rect'
        }
      ],
      itemWidth: 30,
      itemHeight: 4,
      top: '3%',
      right: 40,
      textStyle: {
        color: '#999',
        fontSize: '1.2rem'
      }
    }
  ],
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    axisTick: {
      alignWithLabel: true,
      show: false
    },
    axisLabel: {
      color: '#999',
      fontSize: '1.2rem'
    }
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      color: '#999',
      fontSize: '1.2rem'
    }
  },
  series: [
    {
      name: '资金总额',
      type: 'line',
      symbolSize: 8,
      smooth: true,
      lineStyle: {
        width: 4,
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#458af1'
            },
            {
              offset: 1,
              color: '#428cf1'
            }
          ]
        }
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#98bfff'
          },
          {
            offset: 1,
            color: '#fff'
          }
        ])
      }
    },
    {
      name: '活期总额',
      type: 'line',
      symbolSize: 8,
      smooth: true,
      lineStyle: {
        width: 4,
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#6053e7'
            },
            {
              offset: 1,
              color: '#b379fc'
            }
          ]
        }
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#ccbbfc'
          },
          {
            offset: 1,
            color: '#fff'
          }
        ])
      }
    }
  ]
};

// 横向电池图
// function initDainchi() {
//   const yLabel1 = [
//     '中国工商银行',
//     '中国工商银行',
//     '中国工商银行',
//     '中国工商银行',
//     '中国工商银行'
//   ];
//   const yLabel2 = ['20亿', '20亿', '20亿', '20亿', '20亿'];
//   const data = [100, 78.9, 56, 45.8, 20.9];

//   let option = {
//     backgroundColor: '#091b52',
//     animate: true,
//     grid: {
//       top: '1%',
//       bottom: '1%', // 也可设置left和right设置距离来控制图表的大小
//       left: '20%',
//       right: '10%'
//     },
//     yAxis: [
//       {
//         data: yLabel1,
//         axisLine: {
//           show: false
//         },
//         axisTick: {
//           show: false // 隐藏X轴刻度
//         },
//         axisLabel: {
//           margin: 10,
//           textStyle: {
//             fontSize: 11,
//             color: '#DEEBFF' // X轴文字颜色
//           }
//         }
//       },
//       {
//         data: yLabel2,
//         axisLine: {
//           show: false
//         },
//         axisTick: {
//           show: false // 隐藏X轴刻度
//         },
//         axisLabel: {
//           margin: 10,
//           textStyle: {
//             fontSize: 11,
//             color: '#DEEBFF' // X轴文字颜色
//           }
//         }
//       }
//     ],
//     xAxis: {
//       show: false
//     },
//     series: [
//       {
//         type: 'bar',
//         barWidth: 18,
//         itemStyle: {
//           color: '#2597ed'
//         },
//         data: data,
//         z: 10,
//         zlevel: 2
//       },
//       {
//         // 值分隔
//         type: 'pictorialBar',
//         itemStyle: {
//           color: '#0F375F'
//         },
//         symbolRepeat: 'fixed',
//         symbolMargin: 3,
//         symbol: 'rect',
//         symbolClip: true,
//         symbolSize: [3, 20],
//         symbolPosition: 'start',
//         symbolOffset: [0, 0],
//         data: data,
//         width: 25,
//         z: 0,
//         zlevel: 3
//       },
//       {
//         // 背景
//         name: '背景条',
//         type: 'bar',
//         barWidth: '20',
//         barGap: '-105%',
//         itemStyle: {
//           borderWidth: 0,
//           color: '#143755'
//         },
//         data: [100, 100, 100, 100, 100],
//         z: 0,
//         zlevel: 0
//       },
//       {
//         // 背景分隔
//         type: 'pictorialBar',
//         itemStyle: {
//           color: '#091b52'
//         },
//         symbolRepeat: 'fixed',
//         symbolMargin: 3,
//         symbol: 'rect',
//         symbolClip: true,
//         symbolSize: [3, 20],
//         symbolPosition: 'start',
//         symbolOffset: [0, 0],
//         data: [100, 100, 100, 100, 100],
//         width: 25,
//         z: 0,
//         zlevel: 1
//       }
//     ]
//   };
//   this.options = option;
// }

// 3D柱状图
// function init3dBar() {

// }
